<template>
  <div>
    <button>{{ title }}</button>
    <div>{{ obj.name }}</div>
    <div>
      <button @click="transmitVal">子传父的值</button>
    </div>
  </div>
</template>
<script>
// 在子组件当中怎么获取父组件传给子组件的值
// 通过父组件传递给子组件title字段，子组件要用props 来接收，接收方式如下
// vue 父子组件互相传值的方式，一句话表示：
// 子组件通过props接收父组件传递的参数，子组件通过$emit传递数据给父组件
export default {
  // props:["title"],
  props: {
    // Missing required prop: "title"
    title: {
      type: String, // 类型
      default: '1', // 默认值
      required: true // 是否必传， true 为必传，false 可以不传，不传的时候取默认值
    },
    // 数组和对象在default 设置默认值的时候，一定要用函数return出来
    obj: {
      type: Object,
      required: true,
      default: ()=> {
        return {}
      }
    }
  },
  methods: {
    transmitVal() {
      let val = 1;
      this.$emit("tranVal", val) //$emit 子组件传递父组件的方式，通过方法名字传递
    }
  }
}
</script>
